<style scoped>
    .content-box {
        width: 100%;
        height: 100%;
        background: #ffffff;
        position: relative;
    }

    .top {
        height: 65px;
        background: #eaedf1;
        border-top: 1px solid #bbbbbb;
        border-bottom: 1px solid #bbbbbb;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-size: 18px;
        color: #3bc1a6;
        line-height: 70px;
        padding-left: 10px;
    }

    .top__item {
        margin-left: 30px;
    }

    .top__item--left {
        position: absolute;
        top: 22px;
        left: 25px;
        height: 27px;
        display: inline-block;
        width: 5px;
        background: #3bc1a6;
    }


    .content {
        position: absolute;
        left: 0;
        top: 65px;
        right: 0;
        bottom: 0;
        overflow: auto;
    }
</style>
<template>
    <div class="content-box">
        <div class="top">
            <span class="top__item--left"></span>
            <div>
                <span class="top__item">今日新增：888</span>
                <span class="top__item">本月新增：888</span>
                <span class="top__item">总计：888</span>
            </div>
        </div>
        <div class="content">
            <DataGrid ref="dg" url="/user/list" :params="po">
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column label="注册时间" width="160" align="center">
                    <template slot-scope="scope">
                        <div>{{getDateTimeString(scope.row.registerDate)}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="用户名(手机号)" width="130" align="center"></el-table-column>
                <el-table-column label="性别" width="70" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.info.sex==0?'女':scope.row.info.sex==1?"男":'未知'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="出生年月" width="100" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.info.birthday">{{getDateString(scope.row.info.birthday)}}</div>
                        <div v-else>未知</div>
                    </template>
                </el-table-column>
                <el-table-column prop="info.qq" label="QQ" width="110" align="center"></el-table-column>
                <el-table-column label="所在地" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.info.provinceName}}-{{scope.row.info.cityName}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="绑定邮箱" width="180" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.email">{{scope.row.email}}</div>
                        <div v-else>未绑定</div>
                    </template>
                </el-table-column>
            </DataGrid>
        </div>
    </div>
</template>

<script>
    import {getDateTimeString, getDateString} from 'utils'
    import bus  from 'utils/bus'
    export default {
        data(){
            return {
                po: {},
                vo: { }
            }
        },
        computed: {},
        methods: {
            getDateString,
            getDateTimeString,
            getDateTimeShort(time){
                return getDateTimeString(time).substring(0, 16)
            },
            reload(){
                this.$refs.dg.reload()
            }
        },
        mounted(){
            bus.$on("reload", ()=> {
                this.reload()
            })
        },
        destroyed(){
            bus.$off("reload")
        },
        components: {},
        filters: {}
    }
</script>